<template>
  <div style="width: 100%;height: 100%">
    <avue-crud :option="{...EntityInterfaceOption,...addTo}"
               :data="tableData"
               @current-change="currentChange"
               @size-change="sizeChange"
               ref="crud"
               :page.sync="page">
      <template slot="interfaceAttribute" slot-scope="{row}">
        <span v-for="(item,index) in row.extAttributes">
          {{ item.nameCn }} <span v-if="index!=row.extAttributes.length-1">,</span>
        </span>
      </template>
    </avue-crud>

    <div class="md-component-btns">
      <el-button size="medium" @click="$emit('removeThisTabs')">取消</el-button>
    </div>
  </div>
</template>

<script>
import * as api from "@/api/modulManage/interface";

export default {
  name: "interfaceHistoryTemp",
  inject: ["EntityInterfaceOption"],
  data() {
    return {
      tableData: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 1
      },

      addTo: {
        menu: false,
        header: false,
        selection: false,
      },

      row: {}
    }
  },
  methods: {
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
      this.getList();

    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.getList();
    },

    getList() {
      api.historyList({
        current: this.page.currentPage,
        size: this.page.pageSize,
        masterOid: this.row.masterOid
      }).then(res => {
        const {list, totalRows} = res.data.data;
        this.page.total = totalRows;
        this.tableData = list;
      })
    },
    view(row) {
      this.row = row;
      this.getList();
    }
  }
}
</script>

<style scoped>

</style>
